<template>
  <div class="form-test">
    <el-card>
      <template #header>
        <div class="card-header">
          <h3>BaseForm组件测试</h3>
        </div>
      </template>

      <BaseForm
        ref="formRef"
        :model="formModel"
        :rules="formRules"
        :fields="formFields"
        label-width="120px"
        @submit="handleSubmit"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
  import { ref, reactive } from 'vue'
  import { ElMessage } from 'element-plus'
  import BaseForm from '@/components/base/BaseForm.vue'

  // 表单数据
  const formModel = reactive({
    name: '',
    email: '',
    age: 18,
  })

  // 表单验证规则
  const formRules = {
    name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
    email: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' },
    ],
  }

  // 表单字段
  const formFields = [
    {
      prop: 'name',
      label: '姓名',
      type: 'input',
      placeholder: '请输入姓名',
    },
    {
      prop: 'email',
      label: '邮箱',
      type: 'input',
      placeholder: '请输入邮箱',
    },
    {
      prop: 'age',
      label: '年龄',
      type: 'number',
      min: 0,
      max: 150,
    },
  ]

  // 表单引用
  const formRef = ref()

  // 提交处理
  const handleSubmit = () => {
    ElMessage.success('表单提交成功')
  }
</script>

<style scoped>
  .form-test {
    padding: 20px;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
